<template>
  <div class="app-container">
    <el-form ref="form" label-width="120px">
      <el-form-item label="小说名称">
        <el-input v-model="novel.novelName" />
      </el-form-item>
      <el-form-item label="小说作者">
        <el-input v-model="novel.novelAuthor" />
      </el-form-item>

      <el-form-item label="小说书库">
        <el-select v-model="novel.novelHouse" placeholder="请选择">
          <el-option v-for="item in house" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="小说封面">
        <el-input v-model="novel.novelCover" />
      </el-form-item> -->
      <el-form-item label="小说状态">
        <el-radio-group v-model="novel.novelState">
          <el-radio :label="0">连载中</el-radio>
          <el-radio :label="1">已完结</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="小说简介">
        <el-input v-model="novel.novelBrief" type="textarea" autosize  />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import novel from "@/api/novel"
  export default {
    data() {
      return {
        novel: {
          novelName: '',
          novelAuthor: '',
          novelBrief: '',
          novelCover: '',
          novelHouse: '',
          novelState: 0
        },
        house: [{
            value: '0',
            label: '全部书库'
          },
          {
            value: '1',
            label: '电击文库'
          },
          {
            value: '2',
            label: '富士见文库'
          },
          {
            value: '3',
            label: '角川文库'
          },
          {
            value: '4',
            label: 'MF文库J'
          },
          {
            value: '5',
            label: 'Fami通文库'
          },
          {
            value: '6',
            label: 'GA文库'
          },
          {
            value: '7',
            label: 'HJ文库'
          },
          {
            value: '8',
            label: '一迅社'
          },
          {
            value: '9',
            label: '集英社'
          },
          {
            value: '10',
            label: '小学馆'
          },
          {
            value: '11',
            label: '讲谈社'
          },
          {
            value: '12',
            label: '少女文库'
          },
          {
            value: '13',
            label: '其他文库'
          }
        ]
      }
    },
    watch: { //监听
      $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
        this.init()
      }
    },
    created() {
      this.init()
    },

    methods: {
      onSubmit() {

        //修改
        this.updateNovela()
      },
      updateNovela() {
        this.novel.novelHouse = this.getHouseId(this.novel.novelHouse)
        novel.updateNovel(this.novel)
          .then(response => {
            //提示信息
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            //回到列表页面 路由跳转
            this.$router.push({
              path: '/novel/novelManagement'
            })
          })
      },
      init() {
        //判断路径有id值,做修改
        if (this.$route.params && this.$route.params.id) {
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
          this.getNovelByIda(id)
        } else { //路径没有id值，做添加
          //清空表单
          this.novel = [{
            novelName: '',
            novelAuthor: '',
            novelBrief: '',
            novelCover: '',
            novelHouse: '',
            novelState: 0
          }]

        }
      },
      getNovelByIda(id) {
        novel.getNovelById(id)
          .then(response => {
            this.novel = response.data.siriusNovel
            this.novel.novelHouse = this.getHouseWord(this.novel.novelHouse)
            console.log(this.novel)
          })
      },
      //添加书库真实名字
      getHouseWord(num) {
        switch (num) {
          case 1:
            return "电击文库";
            break;
          case 2:
            return "富士见文库";
            break;
          case 3:
            return "角川文库";
            break;
          case 4:
            return "MF文库J";
            break;
          case 5:
            return "Fami通文库";
            break;
          case 6:
            return "GA文库";
            break;
          case 7:
            return "HJ文库";
            break;
          case 8:
            return "一迅社";
            break;
          case 9:
            return "集英社";
            break;
          case 10:
            return "小学馆";
            break;
          case 11:
            return "讲谈社";
            break;
          case 12:
            return "少女文库";
            break;
          case 13:
            return "其他文库";
            break;
          default:
            return "其他文库";
            break;
        }
      },
      getHouseId(houseName) {
        switch (houseName) {
          case "电击文库":
            return 1;
          case "富士见文库":
            return 2;
          case "角川文库":
            return 3;
          case "MF文库J":
            return 4;
          case "Fami通文库":
            return 5;
          case "GA文库":
            return 6;
          case "HJ文库":
            return 7;
          case "一迅社":
            return 8;
          case "集英社":
            return 9;
          case "小学馆":
            return 10;
          case "讲谈社":
            return 11;
          case "少女文库":
            return 12;
          case "其他文库":
            return 13;
          default:
            return 0;
        }
      }

    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }

  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
